<?php
/**
 * Created by PhpStorm.
 * User: dreamy
 * Date: 2019-06-22
 * Time: 09:31
 */
use yii\helpers\Html;
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>收入流水-公司账</title>
    <meta name="keywords" content="<?= $this->params['seoData']['keywords'] ?>">
    <meta name="description" content="<?= $this->params['seoData']['description'] ?>">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/global.css">
</head>

<body id="app">
<?=Html::cssFile('@web/static/css/index.css')?>
<?php echo $this->render('../public/ele.php')?>
<!--引入页面头部-->
<?php echo $this->render('../public/header.php')?>
<?=Html::jsFile('@web/static/js/jquery-3.4.1.min.js')?>

<style>
    #app{
        background: #f9f9f9ee;
    }
    .profile{
        color: #606266;
        padding-top: 10px;
    }
    #recordMain{
        margin: 30px auto 10px auto;
        width: 1000px;
    }
    #recordMain .personal-aside{
        color: #333;
        background-color:#FFF;
    }
    .record-main{
        width: 100%;
        margin-left: 15px;
        background-color: #FFF;
        padding: 10px 10px 10px 20px;
        min-height: 500px;
    }
    .recordStatRight{
        display: inline-block;
        margin-left: 100px;
        color: #0b72b8;
    }
    .recordStatRight .el-dropdown{
        color: #0b72b8;
        cursor: pointer;
    }
</style>
<div id="recordMain">
    <el-container>
        <el-aside class="personal-aside" width="200px">
            <el-menu :default-openeds="['1']" :default-active="activeMenuIndex" @select="handleMenuSelect">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>账本流水</template>
                        <el-menu-item index="1-1">收入流水</el-menu-item>
                        <el-menu-item index="1-2">支出流水</el-menu-item>
                        <el-menu-item index="1-3">转账流水</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-row class="record-main">
            <!--流水记录列表-->
            <div class="recordListBox">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>账目清单
                            {{ recordType == 10 ? '收入' : (recordType == 20 ? '支出' : '转账') }}流水
                        </span>
                        <el-divider direction="vertical"></el-divider>
                        <span>{{ recordPeriod }}</span>
                        <div class="recordStatRight" v-if="false">
                            总支出：
                            <span class="green number" id="ft-payout">-{{ recordCountDebt.out }}</span>
                            <el-divider direction="vertical"></el-divider>
                            总收入：
                            <span class="orange number" id="ft-payout">{{ recordCountDebt.in }}</span>
                            <el-divider direction="vertical"></el-divider>
                            结余：
                            <span class="gray number" id="ft-payout">{{ recordCountDebt.debt }}</span>
                        </div>
                        <div class="recordStatRight">
                            当前账本：
                            <el-dropdown @command="handleChooseTally">
                                  <span class="el-dropdown-link">
                                    {{currentTally.title}}<i class="el-icon-arrow-down el-icon--right"></i>
                                  </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item v-for="(item, index) in tallyList" :command="item">
                                        {{ item.title }}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                    <!--条件筛选账单表单-->
                    <div class="recordSearchBox">
                        <el-form :inline="true" v-model="recordSearchForm" class="form-inline recordSearchForm">
                            <el-form-item size="mini">
                                <el-select  placeholder="全部分类" clearable filterable default-first-option v-model="recordSearchForm.category_id" filterable @click.native="getCategoryList()">
                                    <el-option-group
                                            v-for="cate in categoryList"
                                            :key="cate.title"
                                            :label="cate.title">
                                        <el-option
                                                v-for="item in cate.children"
                                                :key="item.id"
                                                :label="item.title"
                                                :value="item.id">
                                        </el-option>
                                    </el-option-group>
                                </el-select>
                            </el-form-item>
                            <el-form-item size="mini">
                                <el-select placeholder="全部账户" clearable filterable default-first-option v-model="recordSearchForm.account_id" @click.native="getAccountList()">
                                    <el-option
                                            v-for="item in accountList"
                                            :key="item.id"
                                            :label="item.title"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item size="mini">
                                <el-select placeholder="客户/供应商" clearable filterable default-first-option v-model="recordSearchForm.store_id" @click.native="getStoreListAll()">
                                    <el-option-group
                                            v-for="cate in storeListAll"
                                            :key="cate.title"
                                            :label="cate.title">
                                        <el-option
                                                v-for="item in cate.children"
                                                :key="item.id"
                                                :label="item.title"
                                                :value="item.id">
                                        </el-option>
                                    </el-option-group>
                                </el-select>
                            </el-form-item>
                            <el-form-item size="mini">
                                <el-select  placeholder="项目" clearable filterable default-first-option v-model="recordSearchForm.project_id"  @click.native="getProjectList()">
                                    <el-option
                                            v-for="item in projectList"
                                            :key="item.id"
                                            :label="item.title"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item size="mini">
                                <el-select  placeholder="员工" clearable filterable default-first-option v-model="recordSearchForm.member_id" @click.native="getMemberList()">
                                    <el-option
                                            v-for="item in memberList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item size="mini">
                                <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="recordSearchForm.begin_date"></el-date-picker>
                                ~
                                <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="recordSearchForm.end_date"></el-date-picker>
                            </el-form-item>
                            <p>
                                <el-form-item size="mini">
                                    <el-input placeholder="备注关键字" v-model="recordSearchForm.memo"></el-input>
                                </el-form-item>
                                <el-button type="primary" size="mini" @click="getRecordList(0)">检索</el-button>
                                <el-divider direction="vertical"></el-divider>
                                <el-button type="primary" size="mini" @click="getRecordList(1)">全部</el-button>
                            </p>
                        </el-form>
                    </div>
                    <!--账单列表-->
                    <div class="recordTable">
                        <template>
                            <el-table :data="recordList" border stripe>
                                <el-table-column  type="index">
                                </el-table-column>
                                <el-table-column prop="tally_time" sortable width="120px" label="账单日期">
                                    <template slot-scope="scope">
                                        <i class="el-icon-time"></i>
                                        <span>{{ scope.row.tally_time.substring(0,10) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="category_name" label="分类"></el-table-column>
                                <el-table-column prop="type_txt" label="类型"></el-table-column>
                                <el-table-column prop="amount" sortable label="金额"></el-table-column>
                                <el-table-column prop="account_name" label="账户"></el-table-column>
                                <el-table-column prop="store_name" width="100px" label="客户/供应商"></el-table-column>
                                <el-table-column prop="project_name" label="项目"></el-table-column>
                                <el-table-column prop="member_name" label="员工"></el-table-column>
                                <el-table-column prop="memo" label="备注"></el-table-column>
                                <el-table-column prop="state_txt" label="状态"></el-table-column>
                                <el-table-column fixed="right" label="操作" v-if="false">
                                    <template slot-scope="scope">
                                                        <span class="recordOptBtn primary">
                                                            <i class="el-icon-edit"></i>&nbsp;
                                                        </span>
                                        <span class="recordOptBtn danger">
                                                            <i class="el-icon-delete-solid"></i>&nbsp;
                                                        </span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                </el-card>
            </div>
            <div style="clear: both;"></div>
        </el-row>
    </el-container>
</div>

<div style="height: 100px;"></div>
<?php echo $this->render('../public/footer.php')?>

<script type="application/javascript">
    let CurrDateR = '<?php echo date('Y-m-d');?>';
    let CurrTimeR = '<?php echo date('H:i:s');?>';
    let monthBeginDate = '<?php echo $monthBeginDate;?>';
    let monthEndDate   = '<?php echo $monthEndDate;?>';
    let currentTallyId = '<?php echo $tallyId?>';//当前选中状态的账本
    let loginToken  =  localStorage.getItem('loginToken');
    let recordType = '<?php echo $recordType?>' ;//收入.支出.转账
    let activeMenuIndex =  '<?php echo $activeMenuIndex?:'1-1'?>';
    new Vue({
        el:'#recordMain',
        data() {
            return {
                activeMenuIndex:activeMenuIndex,
                recordPeriod: monthBeginDate + ' ～ '+monthEndDate,
                recordSearchForm:{
                    begin_date : monthBeginDate,
                    end_date : monthEndDate,
                },
                tallyTypeChanged:true,
                recordCountDebt:{
                    in : 0.00 ,
                    out : 0.00 ,
                    debt : 0.00 ,
                },
                currentTally:{},
                tallyList:[],
                recordList:[],
                categoryList:[],
                accountList:[],
                projectList:[],
                memberList:[],
                storeListAll:[],
            }
        },
        computed: {},
        mounted:function() {
            if(!logined){
                location.href='/login'
            }
            this._initTally()
        },
        methods:{
            _initTally(){
                // 获取账本列表
                this.getTallyList()
            },
            getTallyList(){
                let that = this
                axios.get('/api/tally/lists',{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.tallyList = res.data.data
                        if(that.tallyList.length > 0 ) {
                            if(currentTallyId == 0){
                                // 设置第一个为默认账本
                                that.currentTally = that.tallyList[0]
                                currentTallyId  = that.tallyList[0].id
                            }else{
                                that.tallyList.forEach((item,index)=>{
                                    if(item.id == currentTallyId) {
                                        that.currentTally = that.tallyList[index]
                                    }
                                });
                            }
                        }else{
                            that.showTips('warnning','还没有账本~ 先创建一个吧~')
                        }
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getCategoryList(){
                if(!this.tallyTypeChanged){
                    return;
                }
                let that = this
                let cateType = 1 //分类类型
                if(this.tallyAddType == 20){
                    cateType = 2
                }
                axios.get('/api/category/lists?tally_id='+currentTallyId+'&type='+cateType,{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.categoryList = res.data.data
                        that.tallyTypeChanged = false
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getAccountList(){
                let that = this
                if(that.accountList.length > 0 ) return ;
                axios.get('/api/account/lists?tally_id='+currentTallyId,{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.accountList = res.data.data
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getStoreListAll(){
                let that = this
                if(that.storeListAll.length > 0 ) return
                axios.get('/api/store/lists?tally_id='+currentTallyId,{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.storeListAll = that.branchStoreData(res.data.data)
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            branchStoreData(dataList){
                let st1 = [];
                let st2 = [];
                dataList.forEach( function (item,index){
                    if(item.type==1){
                        st1.push(item)
                    }else{
                        st2.push(item)
                    }
                });
                return [
                    {"title":"客户","children":st1},
                    {"title":"供应商","children":st2}
                ];
            },
            getProjectList(){
                let that = this
                if(that.projectList.length > 0 ) return
                axios.get('/api/project/lists?tally_id='+currentTallyId,{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.projectList = res.data.data
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getMemberList(){
                let that = this
                if(that.memberList.length > 0 ) return
                axios.get('/api/member/lists?tally_id='+currentTallyId,{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.memberList = res.data.data
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getRecordList(an){
                let that = this
                if(an == 1) {
                    that.recordSearchForm = {
                        begin_date : monthBeginDate,
                        end_date : monthEndDate,
                    }
                } // 获取全部的时候去除筛选条件
                that.recordSearchForm.type = recordType ;
                axios.get('/api/tally-record/lists',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: that.recordSearchForm
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.recordList = res.data.data
                        that.recordPeriod = that.recordSearchForm.begin_date + ' ～ '+ that.recordSearchForm.end_date
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            handleMenuSelect(index, indexPath ){
                this.activeMenuIndex = index
                if(index == '1-1') {
                    location.href = '/income?id='+currentTallyId
                }else if(index == '1-2'){
                    location.href = '/expend?id='+currentTallyId
                }else if(index == '1-3'){
                    location.href = '/transfer?id='+currentTallyId
                }
            },
            handleChooseTally(commandTally){
                this.currentTally = commandTally
                currentTallyId = commandTally.id
                // 重置数据
                this.recordList=[];
                this.categoryList=[];
                this.accountList=[];
                this.projectList=[];
                this.memberList=[];
                this.storeListAll=[];
            },
            showTips(type,msg){
                this.$message({
                    type: type,
                    message: msg
                });
            }
        },
    })
</script>
</body>
</html>
